<template>
  <div>
    <h3 id="center-title">租户管理</h3>
    <!--   搜索框   -->
    <div id="search-box">
      <el-input class="search-key" placeholder="请输入搜索ID" v-model="name"></el-input>
      <el-button id="search-btn" type="primary" icon="el-icon-search">搜索</el-button>
    </div>
    <!--   路由视图   -->
    <!--      <router-view></router-view>-->
    <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName">
      <el-table-column
          type="index"
          label="序号"
          :index="indexMethod"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="租户姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="sex"
          label="性别">
      </el-table-column>
      <el-table-column
          prop="nickname"
          label="昵称">
      </el-table-column>
      <el-table-column
          label="操作"
          width="360">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="modifyLesseeInfo(scope.row)">修改</el-button>
          <el-button
              size="mini"
              @click="viewLesseeFee()">计费</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页部分  -->
    <div class="paging-box">
      <i class="el-icon-d-arrow-left"></i>
      <i class="el-icon-arrow-left"></i>
      <label><span>1/20</span>页</label>
      <i class="el-icon-arrow-right"></i>
      <i class="el-icon-d-arrow-right"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "LesseeManage",
  data(){
    return {
      //table
      tableData: [{
        sequence: 1,
        name: 'tch',
        sex: '男',
        nickname: 'XXX',
      }, {
        sequence: 2,
        name: 'tch',
        sex: '男',
        nickname: 'XXX',
      }, {
        sequence: 3,
        name: 'tch',
        sex: '男',
        nickname: 'XXX',
      }, {
        sequence: 4,
        name: 'tch',
        sex: '男',
        nickname: 'XXX',
      }],
      name: '',
    };
  },
  methods: {
    indexMethod(index) {
      return index + 1;
    },
    modifyLesseeInfo(row) {
      this.$router.push({
        path:'/super-center/modify-lessee-info',
        query: {lessee: row},
      });
    },
    viewLesseeFee() {
      this.$router.push('/super-center/view-lessee-fee');
    },
    //表格
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }
  },
  //先查询前20个铺在界面里面
  beforeCreate() {
    myRequest.get(`name=&from=1&to=5`, HTTP_IP_PORT + '/super/getLesseeList', true)
        .then(res => {
          let data = JSON.parse(res) || [];
          for (let i = 0; i < data.length; i++) {
            data[i].sequence = i + 1;
          }
          this.tableData = data.length === 0 ? this.tableData : data;
        });
  }
}
</script>

<style scoped>
/*搜索*/
#search-box{
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.search-key{
  width: 75%;
}
#search-btn{
  height: 40px;
}
.show-top{
  z-index: 1;
}
/*表格布局*/
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

#center-title{
  text-align: center;
}

.paging-box{
  position: relative;
  background-color: #5cb85c;
  text-align: right;
}
</style>